<template>
  <div>
    <PerfectTableComponent
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :removeQueryField="removeQueryField"
      :clearQuery="clearQuery"
      title="字典列表项"
      ref="tableRef"
      :table="table"
      :tableColumns="tableColumns"
      :showTableIndex="false"
      :showOperatorColumn="false"
      :showEditButtonInToolBar="true"
      :baseUrl="urls.API_URL_BACKSTAGE_DICTITEM_MANAGE"
      v-model:form="form"
      :formHeader="formHeader"
      @beforeAddRow="beforeAddRow"
      @afterLoadDataSuccessInEditRow="afterLoadDataSuccessInEditRow"
    ></PerfectTableComponent>
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import PerfectTableComponent from '@/components/base/table/PerfectTableComponent.vue';
import { defineExpose, getCurrentInstance, provide, ref } from 'vue';
import type { FormHeader, TableColumn } from '@/types/interface/base_interface';
import { yesOrNoDict } from '@/api/dict';
import useTableList from '@/api/hooks/useTableList';
import type { Role } from '@/types/interface/auth_interface';
import Request from '@/api/request/request';
import type { Dict, DictItem } from '@/types/interface/sys_interface';
import urls from '@/api/request/urls';

// 表格工具必备参数
const { table, query, loadTableList, removeQueryField, clearQuery, changePageSize, changePage } = useTableList(
  urls.API_URL_BACKSTAGE_DICTITEM_MANAGE,
  true,
  {},
  false
);
// 将表格刷新函数传到子容器
provide('loadTableList', loadTableList);
// 定义当前的字典，用于记录字典表格所选中的当前行信息
const dict = ref<Dict>();

// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '字典项名称',
    prop: 'dictKey',
    width: 200
  },
  {
    label: '字典项值',
    prop: 'dictValue',
    width: 100
  },
  {
    label: '排序号',
    prop: 'sort',
    width: 100
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '最后编辑时间',
    prop: 'updateTime'
  }
]);

//表单==========================================================
//表单对象
const form = ref<DictItem>({});
// 表单元素
// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '字典名称',
    prop: 'dictName',
    readonly: true,
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '字典项名称',
    prop: 'dictKey',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur'
      },
      {
        min: 1,
        max: 30,
        message: '长度在 1 到 30个字符',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '字典项值',
    prop: 'dictValue',
    rules: [
      {
        required: true,
        message: '不能为空',
        trigger: 'blur'
      },
      {
        min: 1,
        max: 30,
        message: '长度在 1 到 30个字符',
        trigger: 'blur'
      }
    ]
  },
  {
    label: '排序',
    prop: 'sort',
    type: 'number',
    placeholder: '升序排列'
  },
  {
    label: '备注',
    prop: 'intro',
    type: 'textarea'
  }
]);
//在添加行的动作以前
const beforeAddRow = async () => {
  //传入初始值
  form.value = {
    sort: 0,
    dictName: dict.value!.name,
    sysDict: {
      id: dict.value!.id
    }
  };
};
//在编辑行的动作成功以后
const afterLoadDataSuccessInEditRow = async (formEdit: any) => {
  //重新封装表单对象的值
  if (dict.value != null) {
    form.value.dictName = dict.value.name;
  }
};
// 根据字典的值读取相应的字典列表项信息
const setDictIdForQueryDictItem = async (row: Dict): Promise<void> => {
  // clearQuery();
  // 获取当前的字典信息
  dict.value = row;
  // 刷新表格
  query.value['sysDict.id'] = row.id; // 加上字典查询条件
  await loadTableList();
};
defineExpose({
  // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  setDictIdForQueryDictItem
});
</script>

<style scoped></style>
